<template>
	<view>
		<view class="display-a-js">
			<view class="color_FFFFFF">
				<view class="font-size_56rpx font-weight_bold margin-bottom_30rpx">您好 !</view>
				<view class="font-size_48rpx">欢迎登录~</view>
			</view>

		</view>
		<view class="frame">

			<view style="padding: 48rpx 36rpx;">
				<view class="display-a margin-bottom_20rpx" v-if="loginState==1">
					<!-- <image class="img-2" src="../../static/2.png"></image> -->
					<view class="font-size_30rpx" style="width: 170rpx;">邀请码</view>
					<input type="number" maxlength="6" class="p-bo input-box" v-model="form.invitationCode"
						placeholder="请输入邀请码" placeholder-class="placeholder" />
				</view>
				<view class="display-a margin-bottom_20rpx iphone" v-if="loginState==1">
					<!-- <image class="img-2" src="../../static/2.png"></image> -->
					<view class="font-size_30rpx" style="width: 170rpx;">手机号</view>
					<input type="number" class="p-bo input-box" maxlength="11" v-model="form.merchantCode"
						placeholder="请输入手机号" placeholder-class="placeholder" />
					<view class="verificationCode" @click="getVerificationCode()" v-if="loginState==1">
						{{count?count+'秒':'获取验证码'}}
					</view>
				</view>
				<view class="display-a margin-bottom_20rpx iphone" v-if="loginState==2||loginState==3">
					<!-- <image class="img-2" src="../../static/2.png"></image> -->
					<view class="font-size_30rpx" style="width: 170rpx;">手机号</view>
					<input type="number" class="p-bo input-box" maxlength="11" v-model="staffCode" placeholder="请输入手机号"
						placeholder-class="placeholder" />
					<view class="verificationCode" @click="getVerificationCode()" v-if="loginState==1">
						获取验证码
					</view>
				</view>
				<view class="display-a margin-bottom_20rpx" v-if="loginState==1">
					<!-- <image class="img-2" src="../../static/2.png"></image> -->
					<view class="font-size_30rpx" style="width: 170rpx;">验证码</view>
					<input type="number" maxlength="6" class="p-bo input-box" v-model="code" placeholder="请输入邀请码"
						placeholder-class="placeholder" />
				</view>

				<view class="display-a margin-bottom_20rpx" v-if="loginState==1">
					<!-- <image class="img-2" src="../../static/2.png"></image> -->
					<view class="font-size_30rpx" style="width: 170rpx;">密码</view>
					<input type="number" class="p-bo input-box" v-model="form.password" password placeholder="请输入密码"
						placeholder-class="placeholder" />
				</view>
				<view class="display-a margin-bottom_20rpx" v-if="loginState==2||loginState==3">
					<!-- <image class="img-2" src="../../static/2.png"></image> -->
					<view class="font-size_30rpx" style="width: 170rpx;">密码</view>
					<input type="number" class="p-bo input-box" v-model="password" password placeholder="请输入密码"
						placeholder-class="placeholder" />
				</view>
				<view class="display-a margin-bottom_20rpx" v-if="loginState==1">

					<view class="font-size_30rpx" style="width: 170rpx;">店铺名称</view>
					<input type="safe-password" class="p-bo input-box" v-model="form.merchantName" placeholder="请输入店铺名称"
						placeholder-class="placeholder" />
				</view>
				<view class="display-a margin-bottom_20rpx" v-if="loginState==1">

					<view class="font-size_30rpx" style="width: 170rpx;">联系人</view>
					<input type="text" class="p-bo input-box" v-model="form.linkman" placeholder="请输入联系人"
						placeholder-class="placeholder" />
				</view>
				<view v-if="loginState==1">
					<view :class="[loginState==1?'but':'Login']" @click="register()">注册</view>

					<view :class="[loginState==1?'Login':'but']" @click="login()">登录</view>
				</view>
				<view v-if="loginState==2">
					<view :class="[loginState==1?'Login':'but']" @click="login()">登录</view>
					<view :class="[loginState==1?'but':'Login']" @click="register()">注册</view>
				</view>
				<view v-if="loginState==3">
					<view :class="[loginState==1?'Login':'but']" @click="login()">登录</view>

				</view>
				<view v-if="loginState==3">
					<view class="employeeLogin" @click="employeeLogin()">商家登录</view>
				</view>
				<view v-if="loginState==1||loginState==2">
					<view class="employeeLogin" @click="employeeLogin()">员工登录</view>
				</view>
			</view>

		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				currIndex: 1, //1管理员 2员工
				staffCode: '',
				password: '',

				//1矩阵发布  2数字人剪辑  3现场大屏
				//4视频剪辑  5云闪推  6抖支付
				//7同城爆店码  8更新通知  9数据中心页
				type: 0,
				id: '', //首页详情ID

				// 商家注册
				form: {
					// 邀请码
					invitationCode: '',
					// 商家名称
					merchantName: '',
					// 商家账号
					merchantCode: '',
					// 密码
					password: '',
					// 联系人
					linkman: '',
				},

				// 验证码
				code: '',
				// 注册 1 登录 2 员工登录 
				// 登录
				loginState: 1,

				// 验证码校验
				codeVerification: 11111,
				count: null,
				disableCode: false

			}
		},

		onLoad(options) {
			if (options.type) {
				this.type = options.type;
			}
			if (options.id) {
				this.id = options.id;
			}
			this.staffCode = uni.getStorageSync('staffCode');
			this.currIndex = uni.getStorageSync('types') ? uni.getStorageSync('types') : 1;
		},

		onShow() {

		},

		methods: {
			// 员工登录
			employeeLogin() {
				if (this.loginState == 3) {
					this.loginState = 2

				} else {
					this.loginState = 3
					this.currIndex = 1;
				}
			},
			async login() {
				if (this.loginState == 2) {

					if (!this.staffCode) {
						this.$sun.toast("请输入登录账号", 'none');
						return;
					}

					if (!this.password) {
						this.$sun.toast("请输入登录密码", 'none');
						return;
					}

					console.log(this.staffCode, this.password, this.currIndex)
					const result = await this.$http.post({
						url: this.$api.staffLogin,
						data: {
							staffCode: this.staffCode,
							password: this.password,
							types: this.currIndex
						}
					});

					if (result.code == 2000) {
						this.$sun.toast("登录成功");
						setTimeout(() => {
							uni.setStorageSync("types", this.currIndex);
							uni.setStorageSync("staffCode", this.staffCode);
							console.log(this.currIndex)
							if (this.currIndex == 1) {
								uni.setStorageSync("merchantId", result.data.id);

								if(!this.type){
									uni.switchTab({
										url: '/pages/index/my'
									})
								}

								if (this.type == 7 || this.type == 0) {
									uni.navigateTo({
										url: '/pages/index/index'
									});
								}
								if (this.type == 6) {
									uni.navigateBack({
										url: '/pages/doPay/doPay'
									});
								}

								if (this.type == 9) {
									uni.navigateBack({
										url: '/pages/merchantConfiguration/merchantConfiguration'
									});
								}
								if (this.type == 8) {
									uni.redirectTo({
										url: '/pages/index/log'
									});
								}
								// 修改云闪推跳转
								if (this.type == 5) {
									uni.redirectTo({
										url: '/pages/cloudFlashPush/homePage/homePage'
									});
								}


							}
							if (this.currIndex == 2) {
								uni.setStorageSync("staffId", result.data.id);
								uni.setStorageSync("merchantId", result.data.merchantId);
								uni.navigateTo({
									url: '/pages/index/writeOffPage'
								})

							}


						}, 2000);
					} else {
						this.$sun.toast(result.msg, 'none');
					}
				} else {
					this.loginState = 2
					this.currIndex = 1;
				}



			},
			// 注册
			async register() {
				if (this.loginState == 2) {
					this.loginState = 1
				} else {
					if (!this.form.invitationCode) {
						this.$sun.toast("请输入邀请码", 'none');
						return;
					}

					if (!this.form.merchantCode) {
						this.$sun.toast("请输入手机号", 'none');
						return;
					}

					if (!this.code) {
						this.$sun.toast("请输入验证码", 'none');
						return;
					}

					if (!(this.codeVerification === Number(this.code))) {
						this.$sun.toast("输入验证码不正确", 'none');
						return;
					}
					if (!this.form.password) {
						this.$sun.toast("请输入密码", 'none');
						return;
					}
					if (!this.form.linkman) {
						this.$sun.toast("请输入联系人", 'none');
						return;
					}
					if (!this.form.merchantName) {
						this.$sun.toast("请输入店铺名称", 'none');
						return;
					}

					const result = await this.$http.post({
						url: this.$api.register,
						data: {
							invitationCode: this.form.invitationCode,
							merchantName: this.form.merchantName,
							merchantCode: this.form.merchantCode,
							password: this.form.password,
							linkman: this.form.linkman,
							oemDomainName: 'https://yuntt.weijuyunke.com',
						}
					});
				}



			},
			// 验证码码倒计60秒
			countDown(seconds) {
				this.count = seconds;
				var countdownTimer = setInterval(() => {

					this.count--;
					if (this.count === 0) {
						clearInterval(countdownTimer);
						this.disableCode = false
						// 在这里可以触发验证码过期后的操作
					}
				}, 1000);
			},


			// 注册获取验证码
			async getVerificationCode() {
				if (!this.disableCode) {
					console.log(this.form.merchantCode)
					if (/^1[3456789]\d{9}$/.test(this.form.merchantCode)) {
						const result = await this.$http.get({
							url: this.$api.sendSmsRequest,
							data: {
								domainName: 'https://yuntt.weijuyunke.com',
								phone: this.form.merchantCode

							}
						});

						if (result.code == 2000) {
							this.codeVerification = result.data
							console.log(this.codeVerification)
							this.disableCode = true
							this.countDown(60);
						} else {
							this.$sun.toast(res.msg, 'none')
						}

					} else {
						this.$sun.toast('请填写正确的手机号', 'none')
					}
				}


			},
			tabs(index) {
				this.currIndex = index;
			},

		}
	}
</script>

<style lang="scss">
	.employeeLogin {
		width: 530rpx;
		// background: linear-gradient(180deg, #6568F6 18.23%, #1E6CEB 100%);
		// box-shadow: 0px 4px 4px rgba(78, 41, 210, 0.5);
		// border-radius: 100rpx;
		font-size: 32rpx;
		color: #6568F6;
		text-align: center;
		padding: 20rpx;
		margin-top: 64rpx;
		margin-left: 32rpx;
	}

	.Login {
		width: 530rpx;
		// background: linear-gradient(180deg, #6568F6 18.23%, #1E6CEB 100%);
		// box-shadow: 0px 4px 4px rgba(78, 41, 210, 0.5);
		// border-radius: 100rpx;
		font-size: 32rpx;
		color: #1d1d1d;
		text-align: center;
		padding: 20rpx;
		margin-top: 64rpx;
		margin-left: 32rpx;
	}

	.but {
		width: 530rpx;
		background: linear-gradient(180deg, #6568F6 18.23%, #1E6CEB 100%);
		box-shadow: 0px 4px 4px rgba(78, 41, 210, 0.5);
		border-radius: 100rpx;
		font-size: 32rpx;
		color: #FFFFFF;
		text-align: center;
		padding: 20rpx;
		margin-top: 64rpx;
		margin-left: 32rpx;
	}

	.input-box {
		width: 564rpx;
		padding: 20rpx 0;
	}

	.img-2 {
		width: 36rpx;
		height: 36rpx;
		margin-right: 10rpx;
	}

	.back_4F29D2 {
		background-color: #4F29D2;


	}

	.back_f7f7f7 {
		background-color: #F7F7F7;
	}

	.line {
		width: 44rpx;
		height: 6rpx;
		border-radius: 100rpx;
		margin-left: 140rpx;
	}

	.tabs {
		width: 322rpx;
		text-align: center;
	}

	.top {
		background-color: #F5F5F5;
		border-radius: 10rpx 10rpx 0 0;
		padding: 30rpx 0 12rpx;
	}

	.frame {

		width: 646rpx;

		border-radius: 10rpx;
		// background-color: #FFFFFF;
		background: rgba(255, 255, 255, 0.6);
		margin-top: 44rpx;

		.iphone {
			position: relative;

			.verificationCode {
				z-index: 999;
				position: absolute;
				right: 0;
				text-align: center;
				width: 170rpx;
				height: 65rpx;
				line-height: 65rpx;
				border-radius: 100rpx;
				font-size: 20rpx;
				background: #1E6CEB;
				color: #FFF;
			}
		}

	}

	.img-1 {
		width: 292rpx;
		height: 216rpx;
	}

	page {
		// background-color: #6568F6;
		background-image: url('../../static/组 1 1.png');
		background-repeat: no-repeat;
		background-size: cover;
		padding: 60rpx 52rpx 0;
	}
</style>